<template>
  <view class="category-box">
    <view v-for="(item, index) in props.categoryList.slice(0,7)" :key="item.categoryId"
      @click="toPageSerach(item.categoryId,item.name,index)"
    >{{item.name}}</view>
    <view  @click="toPageSerach(null,'全部分类',-1)">全部分类</view>
  </view>
</template>

<script setup lang="ts">
  import {
    getCurrentInstance,
    ref,
    onBeforeMount,
    reactive,
    toRefs,
    watch
  } from "vue";
  // 父组件传递的数据
  const props = defineProps({
    categoryList:{
      type:Array,
      default:() => [
        
      ]
    }
  })
  const {
    proxy
  } = getCurrentInstance()
  const toPageSerach = (categoryId,name,index)=>{
    const params = {
      categoryId:categoryId,
      name:name,
      activeIndex:index
    }
     proxy.navTo(`/pages/search/search?params=${JSON.stringify(params)}`)
  }
</script>

<style lang='scss' scoped>
  .category-box{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20rpx 30rpx 0 30rpx;
    >view {
      width: 160rpx;
      height: 70rpx;
      background-color: $mxg-color-grey;
      text-align: center;
      line-height: 70rpx;
      font-size: 26rpx;
      border-radius: 20rpx;
      overflow: hidden;
      margin-top: 15rpx;
    }
  }
</style>